<template>
  <link
    rel="stylesheet"
    href="https://at.alicdn.com/t/c/font_4682916_eus4j1hjo3.css"
  />
  <div class="box">
    <h1>todos</h1>
    <div class="content">
      <!-- 使用HeaderCom组件 -->
      <HanderCom @addTodo="addTodo" />
      <ul>
        <!-- 使用TodoCom组件 -->
        <TodoCom
          v-for="todo in todos" :key="todo.id" :todo="todo" @delTodo="delTodo"
        />
      </ul>
      <!-- 使用FooterCom组件 -->
      <footerCom :todos="todos" @clearDone="clearDone" />
    </div>
  </div>
</template>

<script setup>
import HanderCom from "./commponets/HanderCom.vue";
import TodoCom from "./commponets/TodoCom.vue";
import footerCom from "./commponets/footerCom.vue";
import { ref, watch, onMounted } from "vue";
const todos = ref([]);

onMounted(() => {
  todos.value = JSON.parse(
    localStorage.getItem("todos") ? localStorage.getItem("todos") : "[]"
  );
});

watch(
  todos,
  () => {
    localStorage.setItem("todos", JSON.stringify(todos.value));
  },
  { deep: true }
);

// 清除已完成
const clearDone = () => {
  todos.value = todos.value.filter((todo) => !todo.isDone);
};

// 删除todo
const delTodo = (id) => {
  let index = todos.value.findIndex(
    (todo) => todo.id.toString() === id.toString()
  );
  if (confirm("确认删除吗？")) {
    todos.value.splice(index, 1);
  }
};

// 添加todo
const addTodo = (todo) => {
  todos.value.unshift(todo);
};
</script>

<style >
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 20px;
}
.iconfont {
  font-size: 25px;
}
.box {
  width: 300px;
  margin: 50px auto;
}

h1 {
  text-align: center;
  color: red;
}
</style>